<template>
  <!-- template配合v-if、v-else-if、v-else用于切换不止一个元素 -->
  <template v-if="condition==='A'">
    <h1>文章一</h1>
    <span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
  </template>
  <template v-else-if="condition==='B'">
    <h1>文章二</h1>
    <span>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</span>
  </template>
  <template v-else>
    <h1>文章三</h1>
    <span>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</span>
  </template>

  <!-- template配合v-for用于遍历含多个元素的块 -->
  <template v-for="(item,index) in 2" :key="index">
    <li>第{{ item }}项</li>
    <li>第{{ item }}项</li>
  </template>

  <!-- template配合v-slot -->

  <!-- 子组件template -->
  <TemplateChildren/>
  
  <!-- 渲染成原生<template>元素 -->
  <template>
    template
  </template>
</template>

<script>
import {defineComponent} from 'vue';
import TemplateChildren from '@/components/template/TemplateChildren.vue';

export default defineComponent({
  name: 'Template',
  components: {TemplateChildren},
  data() {
    return {
      condition: 'A'
    };
  }
});
</script>

<style scoped>

</style>